<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>k</title>
    <script src="../static/js/angularjs/angular.min.js"></script>
    <script src="../static/js/jquery/jquery-1.8.3.min.js"></script>

</head>
<body>
<body>
no:
<input id="no" value="No.1234567890" />
<br /> quantity:
<input id="quantity" value="100" />
<br /> date:
<input id="date" value="2016-12-20" />
<br />
<input value="postData" type="button" onclick="postData()" />
<br />
<input value="postJson" type="button" onclick="postJson()" />
</body>
</body>

<script type="text/javascript">
    /*<![CDATA[*/
    function postData() {
        var data = 'no=' + $('#no').val() + '&quantity=' + $('#quantity').val()
                + '&date=' + $('#date').val();

        $.ajax({
            type : 'POST',
            url : '/postData',
            data : data,
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }

    function postJson() {
        var data = {
            no : $('#no').val(),
            quantity : $('#quantity').val(),
            date : $('#date').val()
        };
        $.ajax({
            type : 'POST',
            contentType : 'application/json',
            url : '/postJson',
            data : JSON.stringify(data),
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }
    /*]]>*/
</script>
</html>